<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登陆注册</title>
</head>
<body>

<h1>注册</h1>

<!-- 表单form
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post get 提交方式
        post：比较安全，传输大文件

        get：我们可以在URL中看到我们提交的信息，不安全但是高效，不能传输大文件
            提交表单到页面，其网址后显示用户名和密码
            http://localhost:63342
            /HTML/html/%E6%88%91%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5.html
            ?username=yuan&pwd=123
-->

<form action="我的第一个网页.html"  method="get">
  <!-- 文本输入框：input tpye= "text" /
   value  : 文本框默认值
   maxlength：最长能写几个字符
   size ：文本框的长度
   name:  定义的属性名
   readonly:只读模式 value值不可变
   placeholder :所有输入组件中 ,提示组件信息
   required :所有组件中   非空判断
   hidden:隐藏组件
   -->
  <p>名字：<input type="text" name="username"   placeholder="用户名" required  /></p>
  <!-- input type="password" name="pwd" -->
  <p>名字：<input type='password' name="pwd" hidden="hidden" value="123456"/></p>
  <!-- 单选框标签
  input type='radio'
  value :  单选框的值
  name :  表示组  选别二选一 其中两个name都要一致，否则都可以选！！！！！！！
  checked:默认勾选
  disabled ： 禁止选项
  -->
  <p>性别:
    <input type='radio' value="boy" name="sex" checked disabled/>男
    <input type='radio' value="boy" name="sex"/>女
  </p>

  <!-- 多选框标签
  input type='checkbox'
  value :  单选框的值
  name :  表示组  选别二选一 其中两个name都要一致，否则都可以选！！！！！！！
  checked: 默认选中
-->
  <p>爱好
    <input type='checkbox' value="sleep" name="hobby"/>睡觉
    <input type='checkbox' value="code" name="hobby" checked/>敲代码
    <input type='checkbox' value="chat" name="hobby"/>聊天
    <input type='checkbox' value="games" name="hobby"/>游戏
  </p>
<!-- 按钮
input type='button'  不同按钮
input type='image'   图像按钮
input type="submit"  提交按钮
input type="reset"    重置
-->
  <p>按钮：
    <input type='button' value="点击" name="btn1"/>
    <input type='image' src="../img/证件照%20(2).jpg" name="btn1" height="100px"
       width="100px"/>
  </p>

<!--下拉框，列表框
-->
  <p>下拉框：
    <select name="列表名称">
      <option value="china" selected>中国</option>
      <option value="eth">瑞士</option>
      <option value="us">美国</option>
      <option value="yindu">印度</option>
    </select>
  </p>
<!--文本域
cols="50" rows="10"代表文本框的行列
-->
  <p>
     <textarea name="textarea" cols="50" rows="10" >文本内容</textarea>
  </p>
<!--上传域-->
  <p>
    <input type="file" name="files"/>
    <input type="button" value="上传" name="upload"/>
  </p>

<!-- 邮件验证 -->
  <p>邮箱：
    <input type="email" name="email" />
  </p>
<!--URL-->
  <p>URL:
    <input type="url" name="url" />
  </p>
<!--数字验证-->
  <p>商品数量：
    <input type="number" name="num" max="100" min="10" step="10"  />
  </p>
<!-- 滑块 -->
  <p>滑块：
    <input type="range" name="voice" min="0" max="100" step="2"/>
  </p>

<!-- 搜索框 -->
  <p>搜索框：
    <input type="search" name="search" />
  </p>

  <p>
    <!--增强鼠标可用性
    点击label的文字跳转组件
    id="mark"可以写在任何一个标签中
    -->
    <label for="mark">你点我试一试</label>
    <input type="text" id="mark" />
  </p>
<!-- 正则表达式
自己搜索网址寻找
 -->
  <p>自定义邮箱:
    <input type="text" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" />
  </p>


  <p>
     <input type="submit" />
     <input type="reset"/>

  </p>

</form>
</body>
</html>
